<template>
  <div>
    {{ $t('router.back') }}
    <div class="w-full h-48 overflow-hidden">
      <Echart :options="options" />
    </div>

    <div class="aurora-container">
      <div class="aurora-background"></div>
      <div class="aurora-blur"></div>
      <div class="aurora-blur second"></div>
      <div class="aurora-blur third"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ISpec } from '@visactor/vchart';
import Echart from '@/components/echart.vue';

defineOptions({
  name: 'WorkplacePage',
});

const options: ISpec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8,
      },
      {
        time: '4:00',
        value: 9,
      },
      {
        time: '6:00',
        value: 11,
      },
      {
        time: '8:00',
        value: 14,
      },
      {
        time: '10:00',
        value: 16,
      },
      {
        time: '12:00',
        value: 17,
      },
      {
        time: '14:00',
        value: 17,
      },
      {
        time: '16:00',
        value: 16,
      },
      {
        time: '18:00',
        value: 15,
      },
    ],
  },
  xField: 'time',
  yField: 'value',
};
</script>

<style scoped>
.aurora-container {
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.aurora-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
}

.aurora-blur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  z-index: 2;
  animation: aurora-animation 15s infinite alternate;
}

.aurora-blur::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    #87CEFA 0%,    /* 淡蓝色 */
    transparent 70%
  );
}

.aurora-blur.second {
  animation: aurora-animation 20s infinite alternate-reverse;
  transform: translate(20%, 20%);
}

.aurora-blur.second::before {
  background: radial-gradient(
    circle at center,
    #FFB7C5 0%,    /* 樱花色 */
    transparent 70%
  );
}

.aurora-blur.third {
  animation: aurora-animation 25s infinite alternate;
  transform: translate(-20%, -20%);
}

.aurora-blur.third::before {
  background: radial-gradient(
    circle at center,
    #FFD700 0%,    /* 黄色 */
    transparent 70%
  );
}

@keyframes aurora-animation {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translate(-10%, 15%) scale(1.1);
    opacity: 0.6;
  }
  50% {
    transform: translate(15%, -10%) scale(0.9);
    opacity: 0.5;
  }
  75% {
    transform: translate(-15%, -15%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(10%, 10%) scale(1);
    opacity: 0.5;
  }
}
</style>